<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>管理信息系统课程设计</title>
    <!-- Freemarker标签-->
    <#include "/inc/head.ftl"/>
    <@head/>   
</head>
<body>
    <div id="wrapper">
    
        <#include "/inc/nav.ftl"/>
		<@nav/>  
		
        <div id="page-wrapper">
        
            <div class="row">
                <div class="col-lg-12">
                	<div class="panel-body">
	                    <button id="btn-add"  type="button" class="btn btn-primary">添加商品</button>
	                    <button id="btn-edit"  type="button" class="btn btn-success">修改商品</button>
	                    <button id="btn-del" type="button" class="btn btn-danger">删除商品</button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-18">
                    <div class="panel panel-default">
                        <div class="panel-heading">商品列表</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>商品名</th>
                                        <th>价格</th> 
                                        <th>详情</th>
                                        <th>所属类别</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 添加、修改客户表单 -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
     			<div class="modal-dialog">
        			<div class="modal-content">
           				<div class="modal-header">             				
                           <h4 class="modal-title" id="myModalLabel">商品</h4>
          				</div>
          			<input  id="id" type="hidden" class="form-control">
	          		<div class="modal-body"> 
	          		    <div class="row">
							 <div class="col-lg-12">
                                    <form role="form">
                                        <div class="form-group">
                                            <label>商品名</label>
                                            <input id="name"   class="form-control">
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>价格</label>
                                            <input id="price"   class="form-control">
                                        </div>
                                        
                                       
                                        
                                      
                                        
                                        <div class="form-group">
                                            <label>商品详情</label>
                                            <textarea id="comment"   class="form-control" rows="3"></textarea>
                                        </div>
                                        
                                        <div class="form-group">
                                            <label>类别</label>
                                            <select id="category"  name="categoryId"  class="form-control">
                                            </select>
                                        </div>
                                        
                                    </form>
                                </div>
                            </div>
						</div>
		          		<div class="modal-footer">
		          		        <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                                <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
		             			<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		               </div>
	             	</div><!-- /.modal-content -->
 			  	</div>          
        	</div>

        </div>
       
    </div>
    <!-- /#wrapper -->

    <script>
    $(document).ready(function() {
    	var table = $('#list').DataTable({   //此处list与页面table的id相同
        	ajax: '${contextPath}/product/list',
        	language: {
    			"url": "${contextPath}/vendor/datatables/i18n/Chinese.json"   //datatables国际化
			}, 
            columns: [
                 {data: "id","visible" : false},
    			 {data: "name"},
                 {data: "price"},
               
                 {data: "comment"},
                 {data: "categoryName"},
    	   ],
           responsive: true,
           select: true //datatables select 插件
        });
		
		/* 添加按钮 */
    	$('#btn-add').click( function () {
    		resetForm();
    		$("#myModal #id").val("");
    		$("#myModal #myModalLabel").text("添加商品");
    		$.ajax({
    			type:"get",
    			url:"${contextPath}/product/getCategory",
    			dataType:"json",
    			success: function(json){
    				var selector=  $("#category");
    		    	selector.append("<option value='-1'>选择类别</option>"); 
    		   		<#list categoryList as c>  //freemarker遍历用法
    		   			var categoryName="${c.categoryName}";
    		   			var id = "${c.id}";
    		   			selector.append("<option value='"+id+"'>"+categoryName+"</option>");
    		   		</#list>
				}
    		})
    		$('#myModal').modal({keyboard:false,show:true});
        } ); 
		
    	/* 修改按钮 */
    	$('#btn-edit').click( function () {
    		var rowData =table.rows( { selected: true } ).data().toArray();
	   		 if(rowData.length==1){
	   			 var id = rowData[0].id;
	   			$.ajax({
	   				type:"get",
	   				url:"${contextPath}/product/edit",
	   				data : { 
    					"id" : id
    				},
	   				dataType:"json",
	   				success: function(json){
	   						$("#myModal #id").val(json.product.id);							
	   						$("#myModal #name").val(json.product.name);
	   						$("#myModal #price").val(json.product.price);
	   						
	   						$("#myModal #comment").val(json.product.comment);
	   						$("#myModal #categoryId").val(json.product.categoryId);
	   				}	
	   			});	
	   			$("#myModal #myModalLabel").text("修改商品信息");
	    		$('#myModal').modal({keyboard:false,show:true});
	   		 }else{
	   			layer.msg('请选择一行!', {time: 1000, icon:7});   //layer弹出层，1000代表1秒后关闭。7为图标编号
	   		 }
        } ); 
    	
    	/* 删除按钮 */
    	$('#btn-del').click( function () {
    		 var rowData =table.rows( { selected: true } ).data().toArray();  //得到datatables选中行的值并转成数组
    		 if(rowData.length==1){
    			 layer.msg('你确定删除该记录吗?', {time: 0 ,btn: ['确定', '取消'],yes: function(index){
	    			 	del(rowData[0].id);
	    			 	layer.close(index);
		   				}
	   			});
    		 }else{
    			 layer.msg('请选择一行!', {time: 1000, icon:7});
    		 }
    	} ); 
    	
    	/* 表单添加、修改提交按钮 */
    	$("#myModal #btn-submit").click( function () {
    		var id = $("#myModal #id").val();
    		 if(id == null || id == ""){   //将添加和编辑表单合二为一。根据ID是否为空判断到底是添加还是修改。
    			submit("${contextPath}/product/save");
    		}else{
    			submit("${contextPath}/product/update"); 
    		}
    	} ); 
    	
    	$("#myModal #btn-reset").click( function () {
    		resetForm();
    	} ); 
    	
    	/* 清空表单 */
    	function resetForm(){
    		$("#myModal #name").val("");
    		$("#myModal #price").val("");
    	
    		$("#myModal #comment").val("");
    		$("#myModal #categoryId").val("");
    	}
    	
    	 /* 表单提交操作 */
    	function submit(url){
    		var id = $("#myModal #id").val();
    		var name = $("#myModal #name").val();
    		var price = $("#myModal #price").val();
    		
    		var comment = $("#myModal #comment").val();
    		var categoryId = $("#myModal #category").val();
    			$.ajax({
    				type : "post",
    				url : url,
    				dataType : "json",
    				data : { 
    					"product.id":id,    
    					"product.name":name,
    					"product.price":price,
    					
    					"product.comment":comment,
    					"product.categoryId":categoryId
    				},
    				success : function(data) {
    					if(data.result){
	    					layer.msg(data.msg, {time: 1000, icon:1});
	    					resetForm();
	    					$("#myModal").modal('hide');
	    					table.ajax.reload();//重新加载table
    					}
    				},
    				error : function() {
    					layer.msg('操作失败!', {time: 1000, icon:2});
    				}
    			});
    	}
    	/* 删除操作 */
    	function del(id){
    			$.ajax({
    				type : "post",
    				url : "${contextPath}/product/delete",
    				dataType : "json",
    				data : { 
    					"id" : id
    				},
    				success : function(data) {
    					if (data.result){
    						layer.msg(data.msg, {time: 1000, icon:1});
        					table.ajax.reload();
    					}
    				},
    				error : function() {
    					layer.msg('系统出错!', {time: 1000, icon:2});
    				}
    			});
    	}	
    });
    </script>
	</body>
</html>
